import React, { useState } from "react";
import { Card, Input, Select, DatePicker, Space, Form, Row, Col, Button } from "antd";
import type { ColumnsType } from "antd/es/table";
import FilterTable from "@/components/FilterTable";
import type { FormConfig } from "@/components/FilterTable";

interface UserData {
  id: string;
  name: string;
  age: number;
  address: string;
  status: "active" | "inactive" | "pending";
  createdAt: string;
}

const UserListPage = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [users, setUsers] = useState<UserData[]>([]);
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 10,
    total: 0,
    onChange: (page: number, pageSize: number) => {
      setPagination((prev) => ({ ...prev, current: page, pageSize }));
      fetchUsers(page, pageSize);
    },
  });

  // 模拟获取用户数据
  const fetchUsers = async (page: number, pageSize: number) => {
    setLoading(true);
    try {
      // 这里应该是实际的API调用
      // const response = await getUserList(page, pageSize, ...);
      // 模拟API延迟
      await new Promise((resolve) => setTimeout(resolve, 500));
      // 模拟数据
      const mockData: UserData[] = Array.from({ length: pageSize }, (_, index) => ({
        id: `user-${(page - 1) * pageSize + index + 1}`,
        name: `用户${(page - 1) * pageSize + index + 1}`,
        age: 20 + Math.floor(Math.random() * 30),
        address: `北京市朝阳区${Math.floor(Math.random() * 1000)}号`,
        status: ["active", "inactive", "pending"][Math.floor(Math.random() * 3)] as
          | "active"
          | "inactive"
          | "pending",
        createdAt: new Date(
          Date.now() - Math.floor(Math.random() * 30) * 24 * 60 * 60 * 1000
        ).toISOString(),
      }));
      setUsers(mockData);
      setPagination((prev) => ({ ...prev, total: 100 }));
    } catch (error) {
      console.error("获取用户列表失败:", error);
    } finally {
      setLoading(false);
    }
  };

  // 搜索处理
  const handleSearch = () => {
    const values = form.getFieldsValue();
    console.log("搜索条件:", values);
    fetchUsers(1, pagination.pageSize);
  };
// 筛选表单配置
const formConfig: FormConfig = {
    formProps: {
      layout: "inline",
      onFinish: (values) => {
        console.log(1,values);
      },
    },
    basicFields: [
      {
        formItemProps: {
          name: "id",
          label: "用户ID",
        },
        type: "Input",
        componentProps: {
          placeholder: "请输入用户ID",
          allowClear: true,
        },
      },
      {
        formItemProps: {
          name: "age",
          label: "年龄",
        },
        type: "Input",
        componentProps: {
          placeholder: "请输入年龄",
          allowClear: true,
        },
      },
      {
        formItemProps: {
          name: "address",
          label: "地址",
        },
        type: "Input",
        componentProps: {
          placeholder: "请输入地址",
          allowClear: true,
        },
      },
      {
        formItemProps: {
          name: "name",
          label: "用户名",
        },
        type: "Input",
        componentProps: {
          placeholder: "请输入用户名",
        },
      },
    ],
    advancedFields: [
      {
        formItemProps: {
          name: "status",
          label: "状态",
        },
        type: "Select",
        componentProps: {
          placeholder: "请选择状态",
          allowClear: true,
        },
      },
      {
        formItemProps: {
          name: "createTime",
          label: "创建时间",
        },
        type: "Input",
        componentProps: {
          placeholder: "请输入创建时间",
          allowClear: true,
        },
      },
    ],
  };
  // 表格列配置
  const columns: ColumnsType<UserData> = [
    {
      title: "用户ID",
      dataIndex: "id",
      key: "id",
      width: 100,
    },
    {
      title: "用户名",
      dataIndex: "name",
      key: "name",
      width: 120,
    },
    {
      title: "年龄",
      dataIndex: "age",
      key: "age",
      width: 80,
    },
    {
      title: "地址",
      dataIndex: "address",
      key: "address",
    },
    {
      title: "状态",
      dataIndex: "status",
      key: "status",
      width: 100,
      render: (status) => {
        const statusMap = {
          active: <span style={{ color: "green" }}>活跃</span>,
          inactive: <span style={{ color: "gray" }}>非活跃</span>,
          pending: <span style={{ color: "orange" }}>待审核</span>,
        };
        return statusMap[status as keyof typeof statusMap];
      },
    },
    {
      title: "创建时间",
      dataIndex: "createdAt",
      key: "createdAt",
      width: 180,
      render: (time) => new Date(time).toLocaleString(),
    },
    {
      title: "操作",
      key: "action",
      width: 150,
      fixed: "right",
      render: (_, record) => (
        <Space size="middle">
          <a>编辑</a>
          <a>删除</a>
        </Space>
      ),
    },
  ];
  // 批量操作按钮
  const batchActions = (
    <Space>
      <Button>批量删除</Button>
      <Button>批量启用</Button>
      <Button>批量禁用</Button>
    </Space>
  );

  // 表格操作按钮
  const tableActions = (
    <Space>
      <Button type="primary">新增用户</Button>
      <Button>导出数据</Button>
    </Space>
  );
  
  return (
    <Card style={{ margin: 0, border: "none", width: "100%", minHeight: "100%" }}>
      <FilterTable
        formConfig={formConfig}
        dataSource={users}
        columns={columns}
        loading={loading}
        pagination={pagination}
        onSearch={handleSearch}
        batchActions={batchActions}
        tableActions={tableActions}
        showAdvancedFilter={true}
      />
    </Card>
  );
};

export default UserListPage;
